<template>
  <div class="overhead-info-con">
    <div class="title-bar">物流/报关</div>
    <a-form :model="form" ref="formRef" auto-label-width>
      <a-row>
        <a-col :span="12">
          <a-form-item label="中文报关名">
            <a-input v-model="form.name" max-length="50" show-word-limit />
          </a-form-item>
        </a-col>
        <a-col :span="11" :offset="1">
          <a-form-item label="英文报关名">
            <a-input v-model="form.nameEn" max-length="255" show-word-limit />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="报关单价">
            <a-input v-model="form.amount">
              <template #prefix> USD </template>
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :span="11" :offset="1">
          <a-form-item label="报关重量">
            <a-input v-model="form.weight">
              <template #suffix> g </template>
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="海关编码">
            <a-input v-model="form.customsCode" max-length="20" show-word-limit />
          </a-form-item>
        </a-col>
        <a-col :span="11" :offset="1">
          <a-form-item label="危险品运输">
            <a-select v-model="form.dangerLabel" allow-clear placeholder="请选择">
              <a-option label="含电" value="含电"></a-option>
              <a-option label="纯电" value="纯电"></a-option>
              <a-option label="液体" value="液体"></a-option>
              <a-option label="粉末" value="粉末"></a-option>
              <a-option label="膏体" value="膏体"></a-option>
              <a-option label="带磁" value="带磁"></a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="title-bar">箱规</div>
    <a-table :data="list" :pagination="false" class="table-two-line" size="mini" :scroll="{ y: 180 }">
      <template #columns>
        <a-table-column title="外箱尺寸" #cell="{ record }" :width="260">
          <a-space>
            <a-input v-model="record.volume.length" placeholder="长" :style="{ width: '60px' }" />
            <a-input v-model="record.volume.width" placeholder="宽" :style="{ width: '60px' }" />
            <a-input v-model="record.volume.height" placeholder="高" :style="{ width: '60px' }" />
            <a-button> cm </a-button>
          </a-space>
        </a-table-column>
        <a-table-column title="单箱数量" #cell="{ record }">
          <a-input v-model="record.quantity" placeholder="请输入">
            <template #suffix> pcs </template>
          </a-input>
        </a-table-column>
        <a-table-column title="单箱毛重" #cell="{ record }">
          <a-input v-model="record.groWeight.weight" placeholder="请输入">
            <template #suffix> kg </template>
          </a-input>
        </a-table-column>
        <a-table-column title="单箱净重" #cell="{ record }">
          <a-input v-model="record.netWeight.weight" placeholder="请输入">
            <template #suffix> kg </template>
          </a-input>
        </a-table-column>
        <a-table-column title="操作" #cell="{ record, rowIndex }" :width="120">
          <a-button class="gray-outline" size="mini" @click="list.push(specItem)">
            <icon-plus />
          </a-button>
          <a-button class="gray-outline ml10" size="mini" :disabled="!list[1]" @click="list.splice(rowIndex, 1)">
            <icon-minus />
          </a-button>
        </a-table-column>
      </template>
    </a-table>
    <div class="title-bar" style="margin: 5px 0">包装信息</div>
    <div>
      <!-- <a-space>
        <div>包装</div>
        <a-select @change="packChange" v-model="packing.id" placeholder="请选择" :style="{ width: '180px' }" :trigger-props="{ autoFitPopupMinWidth: true }">
          <a-option v-for="item of packList" :label="item.skuName" :value="item.id"></a-option>
        </a-select>
      </a-space> -->
      <a-button class="gray-outline" @click="showPackModal = true">关联包装</a-button>
      <a-table :data="packList" size="mini" class="table-two-line mt10" :pagination="false" :scroll="{ x: '100%', y: 200 }">
        <template #columns>
          <a-table-column title="序号" #cell="{ record, rowIndex }" :width="40">{{ rowIndex + 1 }}</a-table-column>
          <a-table-column title="图片" :width="60">
            <template #cell="{ record }">
              <ImgPopover :src="getImgUrl(record)">
                <template #con>
                  <a-image :preview="false" width="40" height="40" fit="contain" :src="getImgUrl(record)" />
                </template>
              </ImgPopover>
            </template>
          </a-table-column>
          <a-table-column title="包装名称" #cell="{ record }" :width="60">
            <TextLimit position="top" :rows="2">{{ record.skuName }}</TextLimit>
          </a-table-column>
          <a-table-column title="SKU" #cell="{ record }" :width="60">
            <TextLimit position="top" :rows="2">{{ record.sku }}</TextLimit>
          </a-table-column>
          <a-table-column title="长宽高(cm)" #cell="{ record }" :width="60"> {{ $extract(record, 'volume.length') }}×{{ $extract(record, 'volume.width') }}×{{ $extract(record, 'volume.height') }} </a-table-column>
          <a-table-column title="重量(g)" #cell="{ record }" :width="60">
            {{ $extract(record, 'weight.weight') }}
          </a-table-column>
          <a-table-column title="数量" #cell="{ record }" :width="120">
            <a-input-number :style="{ width: '200px' }" :min="1" v-model="record.num" mode="button" />
          </a-table-column>
          <a-table-column title="操作" #cell="{ rowIndex }" :width="40">
            <a-button type="text" @click="packList.splice(rowIndex, 1)">移除</a-button>
          </a-table-column>
        </template>
      </a-table>
    </div>
  </div>
  <SelPacking v-if="showPackModal" v-model="showPackModal" @save="selPack" />
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs } from 'vue'
  import { pagePacking } from '@/api/product'
  import SelPacking from '../selPacking.vue'
  export default defineComponent({
    components: {
      SelPacking,
    },
    setup() {
      const specItem = {
        groWeight: {
          unit: 'kg',
          weight: '',
        },
        netWeight: {
          unit: 'kg',
          weight: '',
        },
        quantity: '',
        volume: {
          height: '',
          length: '',
          unit: 'cm',
          width: '',
        },
      }

      const data: any = reactive({
        form: {
          currency: 'USD',
          unit: 'g',
        },
        packing: {
          id: '',
          sku: '',
          skuName: '',
        },
        list: [specItem],
        packList: [],
        showPackModal: false,
      })

      const init = (info: any) => {
        data.form = info?.declaration || {}
        data.list = info?.boxSpecList || [specItem]
        data.packList = info?.packingList || []
      }

      // const getPackList = async () => {
      //   let params = {
      //     pageSize: 99999,
      //   }
      //   const res: any = await pagePacking(params)
      //   data.packList = res?.data?.records || []
      // }

      const packChange = (val: string) => {
        let item: any = data.packList.find((e: any) => e.id == val)
        console.log(item)
        data.packing.sku = item.sku
        data.packing.skuName = item.skuName
      }

      const selPack = (list: any) => {
        console.log(list)

        // 对比，相同的不添加
        list.forEach((e: any) => {
          let item = data.packList.find((item: any) => item.id == e.id)
          if (!item) {
            data.packList.push(e)
          }
        })
      }

      const getImgUrl = (record: any) => {
        return record.productPicList[0]?.url || ''
      }

      // getPackList()

      return {
        ...(toRefs(data) as any),
        init,
        specItem,
        packChange,
        selPack,
        getImgUrl,
      }
    },
  })
</script>

<style lang="less" scoped>
  .overhead-info-con {
    margin: 10px;
  }
</style>
